<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Form</title>

    <style type="text/css">
        p {
            color: seagreen;
        }
    </style>
</head>

<body>
    <form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
        <p>文本输入</p>
        <!-- 单行文本输入 -->
        First name: <input type="text" name="firstname" value="" maxlength="50" />
        <br />

        Last name: <input type="text" name="lastname" value="" />
        <br />

        <!-- Placeholder 属性，表单中大多数不同类型的input 元素都可以使用placehold属性。 -->
        <p>Placeholder 属性</p>
        <input type="text" name="firstname" value="" placeholder="Please input first name" />
        <br />

        <!-- Required属性，可以用于任何表单控件
            若浏览器支持该属性，如果没有为这个控件指定指，点击提交，会得到一个错误信息，表单不会提交服务器。
            若浏览器不支持该属性，表单可以提交。
        -->
        <p>Required属性</p>
        <input type="text" placeholder="Please input first name" required />
        <br />

        <!-- 单选钮输入 -->
        <p>单选钮输入
            checked 是布尔属性，不需要值。有属性checked，这个输入控件就会选中。
        </p>
        <!-- <input type="radio" name="hotornot" value="hot" /> Hot
        <input type="radio" name="hotornot" value="not" checked /> Not -->
        <input type="radio" name="hotornot" value="hot" id="hot" />
        <label for="hot">Hot</label>
        <input type="radio" name="hotornot" value="not" checked id="not" />
        <label for="not">Not</label>
        <br />
        <br />

        <!-- 复选框输入 -->
        <p>复选框输入</p>
        <input type="checkbox" name="spice" value="Salt" /> Salt
        <br />

        <input type="checkbox" name="spice" value="Peper" checked />Peper
        <br />

        <input type="checkbox" name="spice" value="Garlic" />Garlic
        <br />

        <p>复选框输入</p>
        <!-- spice[]只是一个普通的表单元素名，名称中有没有括号对浏览器没有任何影响。
            使用[]PHP服务器提示这个表单变量可能包含多个值。
         -->
        <input type="checkbox" name="spice[]" value="Salt" /> Salt
        <br />

        <input type="checkbox" name="spice[]" value="Peper" checked />Peper
        <br />

        <input type="checkbox" name="spice[]" value="Garlic" />Garlic
        <br />

        <!-- 文本区：用于输入多行文本 -->
        <p>文本区：用于输入多行文本</p>
        <textarea>Find opportunities to reduce your Android app size by inspecting the contents of your app APK file, even if it wasn't built with Android Studio. Inspect the manifest file, resources, and DEX files. Compare two APKs to see how your app size changed between app versions.
            </textarea>
        <br />
        <br />

        <textarea name="comments" rows="10" cols="48">Find opportunities to reduce your Android app size by inspecting the contents of your app APK file, even if it wasn't built with Android Studio. Inspect the manifest file, resources, and DEX files. Compare two APKs to see how your app size changed between app versions.
            </textarea>
        <br />
        <br />

        <!-- 用于创建一个菜单，以供做出选择
            select：菜单
            option：菜单项
            -->
        <p>菜单</p>
        <select name="characters">
            <option value="Buckaroo" selected> Buckaroo Banzai</option>
            <option value="Tommy">Perfect Tommy</option>
            <option value="Penny">Penny Priddy</option>
            <option value="Jersey" selected>New Jersey</option>
            <option value="John">John Parker</option>
        </select>
        <br />
        <br />

        <!-- 数字输入 -->
        <p>数字输入</p>
        <input type="number" min="0" max="20" />
        <br />
        <br />

        <!-- 范围输入 -->
        <p>范围输入</p>
        <!-- 如果用户输入的值超出了设定范围，会得到一个错误的信息。 -->
        <input type="range" min="0" max="100" step="5" />
        <br />
        <br />

        <!-- 颜色输入
            如果浏览器不支持颜色输入元素，该控件会创建一个常规的文本输入控件。
         -->
        <p>颜色输入</p>
        <input type="color" />
        <br />
        <!-- 日期输入
            如果浏览器不支持日期选择控件格式指定日期，该控件会创建一个合法的日期格式串，发送给服务器脚本。
         -->
        <p>日期输入</p>
        <input type="date" />
        <br />

        <!-- Email输入
             email <input> 是一个文本输入元素。但在一些移动浏览器上，开入输入时用户会得到一个方便输入email的定制键盘。
         -->
        <p>Email输入</p>
        <input type="email" />
        <br />

        <!-- url输入
             url <input> 是一个文本输入元素。但在一些移动浏览器上，开入输入时用户会得到一个定制键盘。
         -->
        <p>url输入</p>
        <input type="url" />
        <br />

        <!-- tel输入
             tel <input> 是一个文本输入元素。但在一些移动浏览器上，开入输入时用户会得到一个定制键盘。
         -->
        <p>tel输入</p>
        <input type="tel" />
        <br />

        <!-- password -->
        <p>password </p>
        <input type="password" name="secret" />

        <!-- 文件输入 -->
        <p>文件输入 </p>
        <input type="file" name="doc" />

        <!-- 组织元素 -->
        <p>组织元素</p>
        <fieldset>
            <legend> Condiments</legend>
            <input type="checkbox" name="spice" value="salt" /> Salt<br />
            <input type="checkbox" name="spice" value="peper" />Pepper<br />
            <input type="checkbox" name="spice" value="garlic" />Garlic<br />
        </fieldset>
        <br />
        <fieldset>
            <input type="checkbox" name="spice" value="salt" /> Salt<br />
            <input type="checkbox" name="spice" value="peper" />Pepper<br />
            <input type="checkbox" name="spice" value="garlic" />Garlic<br />
        </fieldset>

        <!-- 提交输入 -->
        <p>提交输入</p>
        <!-- <input type="submit" /> -->
        <!-- value 属性改变按钮上显示的文本 -->
        <input type="submit" value="Send" />
        <br />
        <br />
    </form>
</body>

</html>